@import (once) "../../include/vars";
@import (once) "../../include/mixins";

.textarea, textarea {
    height: auto;
    padding: .5rem .75rem;
}

textarea {
    line-height: 1.2;
}

.textarea {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    width: 100%;
    padding: 0;

    .fake-textarea {
        opacity: 0;
        z-index: -1;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background: lightblue;
        border: 1px solid red;
    }

    textarea {
        min-height: 4rem;
        overflow-y: hidden;
        resize: none;
        border: none!important;
        transition: height .1s linear;
        &:focus {
            box-shadow: none;
        }

    }

    &.no-scroll-vertical textarea{
        overflow-y: hidden!important;
    }

    .input-clear-button {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
        background-color: transparent;
        &:hover {
            background-color: @light;
            text-shadow: rgba(0,0,0,.25) 0.1em 0.1em 0.2em;
        }
    }

    &.disabled {
        .clear-button {
            display: none;
        }
    }

    .prepend {order: 1}
    .append {order: 3}
    textarea {order: 2;}

    .input-clear-button ~ textarea {
        padding-right: 48px;
    }
}
